<template>
	<view class="content">
		<view class="">欢迎进入智能助手~</view>
		<view class="right">
			<!-- <button class="_login">登录</button> -->
			<!-- <view class="right_other">
					<image class="img" src="../../static/logo.png" mode=""></image>
					<view class="">
						小明
					</view>
				</view> -->
		</view>
	</view>
	<view class="" @click="toNetwrok">
		<uni-section type="line" :titleFontSize="`32rpx`" :title="`设备配网`">
			<template v-slot:right>
				<uni-icons type="right" size="24"></uni-icons>
			</template>
		</uni-section>
	</view>
	<view class="" style="margin-top: 30rpx">
		<uni-section type="line" :titleFontSize="`32rpx`" :title="`我的设备`">
			<template v-slot:right>
				<view class="butt_add" @click="toAddAdvice">添加</view>
			</template>
		</uni-section>
	</view>
	
	<view class="" v-for="(item, index) in list" :key="index">
		<uni-card>
			<template v-slot:title>
				<view class="_title_heard">
					<view class="">{{item?.deviceName}}</view>
					<view class="_subTitle" @click="toUpdateAdvice(item)">修改配置</view>
				</view>
			</template>
			<template slot="actions">
				<view class="_actions_body">
					<view class="actions_name">{{item.deviceSn}}</view>
					<view class="_body_tag">
						<view class="tag-view">
							<uni-tag :inverted="true" :text="item.roleName" type="success" />
						</view>
						
						<view class="tag-view">
							<uni-tag :inverted="true" :text="item.chipModelName" type="success" />
						</view>
						<!-- <view class="tag-view">
							<uni-tag :inverted="true" text="自动唤醒" type="success" />
						</view> -->
					</view>
				</view>
			</template>
		</uni-card>
	</view>
	<Empty v-if="list.length == 0"></Empty>

	<view class=""></view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { uniRouter,uniToken ,uniStorage, uniCommon} from '../../utils';
import {wxlogin } from "../../utils/auth.js"
import { ref } from 'vue';
import {login,getAdviceList,comboquary,getUserInfo} from '../../api'
import Empty from "../../components/Empty.vue"
let list = ref([]);
onLoad(async()=>{
	let code = await wxlogin();
	console.log("code",code)
	let result = await login(code);
	uniToken.setToken(result.data.token)
	// console.log(result);
	let userInfo = await getUserInfo()
	uniStorage.save("userInfo", userInfo.data)
	getAdiceListPage();
	// comboquary();
})
async function getAdiceListPage(){
	let adviceList = await getAdviceList()
	console.log('getAdviceList',adviceList);
	list.value = adviceList.data;
}
function toNetwrok() {
	uniRouter.push('/pages/distributionNetwork/distributionNetwork');
}

function toAddAdvice() {
	uniRouter.push('/pages/addAdvice/addAdvice');
}
function toUpdateAdvice(item){
	let objJSON = uniCommon.objectToJson(item)
	uniRouter.push(`/pages/updateAdvice/updateAdvice?obj=${objJSON}`);
}
</script>

<style lang="scss">
.content {
	background: linear-gradient(0deg, #f1f1f1, #9ef2a9);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	height: 500rpx;
}

.right {
	// height:300rpx;
	// background:#f24;
}

.right_other {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

._login {
	background: #fff;
	padding: 0 40rpx;
	margin: 0;
	border-radius: 20rpx;

	line-height: 60rpx;
	font-size: 30rpx;
}

._login::after {
	content: '';
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
	display: none;
}

.butt_add {
	padding: 10rpx 20rpx;
	background: linear-gradient(0deg, #f1f1f1, #9ef2a9);
	border-radius: 10rpx;
}
.uni-card__content{
	padding:0 !important;
}
._title_heard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:20rpx 0;
	._subTitle{
		font-size: 24rpx;
		padding:5rpx 20rpx;
		border:solid 1px #9ef2a9;
		border-radius: 10rpx;
	}
}

._actions_body {
	.actions_name{
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
}

// .uni-card--border{
// 	border:solid 1px #9ef2a9 !important;
// }

._body_tag {
	display: flex;
	align-items: center;
	margin:30rpx 0;
	.tag-view{
		margin-right: 20rpx;
	}
}
</style>
